<template>
  <div>
    <!-- <div class="tab">
      <div class="yongjin"><span>图片：</span> <span><img
            :src="imgs+list.url"
            alt=""
          ></span></div>
      <div class="yongjin"><span>链接：</span> <span>{{list.pic}}</span></div>
      <div
        class="bjian"
        @click="EditClick()"
      >添加/修改</div>
    </div> -->

    <div class="xzengs">
      <el-button
        @click="add()"
        type="success"
        size="small"
      >新增</el-button>
    </div>

    <el-table
      :data="pageList"
      border
      style="width: 100%"
    >
      <el-table-column
        label="序号"
        prop="index"
      ></el-table-column>

      <el-table-column
        label="运营商"
        prop="name"
      ></el-table-column>

      <el-table-column label="标题">
        <template slot-scope="scope">
          {{scope.row.title}}
        </template>
      </el-table-column>

      <el-table-column
        label="内容"
        width="400"
      >
        <template slot-scope="scope">
          <div
            v-html="scope.row.text"
            style="max-height:100px;overflow: hidden"
          ></div>
        </template>
      </el-table-column>

      <el-table-column
        fixed="right"
        label="操作"
        width="240"
      >
        <template slot-scope="scope">
          <!-- <el-button @click="handleClick(scope.row)" type="primary" size="small">查看</el-button> -->
          <el-button
            @click="bj(scope.row.id)"
            type="primary"
            plain
            size="small"
          >编辑</el-button>
          <el-button
            @click="chakan(scope.row.id)"
            type="primary"
            size="small"
          >查看</el-button>
          <el-button
            @click="DeleteClick(scope.row.id)"
            type="danger"
            size="small"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="paginat">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage4"
        :page-size="10"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>

    <!-- 编辑弹框 -->
    <el-dialog
      title="添加/修改"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <div class="bili">
        <div>
          <span> 图片:</span>
          <el-upload
            list-type="picture-card"
            action="http://www.jfqiandai.com/img/upload"
            :on-preview="handlePreview2"
            :on-remove="handleRemove2"
            :file-list="fileList2"
            :on-success="onSuccessPic"
            :limit="1"
          >
            <i class="el-icon-plus"></i>
          </el-upload>

        </div>
        <div>
          <span> 链接:</span><input
            type="text"
            v-model="lianjie"
            placeholder="请输入链接地址"
          >
        </div>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="EditOk()"
        >确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>


<script>
export default {
  data() {
    return {
      val: 1,
      currentPage4: 1,
      total: 0,
      list: [],
      fileList2: [],
      dialogVisible: false,
      lianjie: "",
      picUrl: "",
      pageList: [],
      imgs: "http://www.jfqiandai.com/file"
    };
  },
  created() {
    this.fenXiang();
    this.liebiao();
  },
  methods: {
    handleCurrentChange(val) {
      this.val = val;
      this.liebiao();
      console.log(`当前页: ${val}`);
    },
    //兑换教程获取
    fenXiang() {
      let url = "/config/getExchangeCourse";
      this.httpGet(url, res => {
        if (res.code == 200) {
          this.list = res.data;
        }
      });
    },
    //编辑
    EditClick(v) {
      this.dialogVisible = true;
    },
    EditOk() {
      this.isOk();
    },
    isOk() {
      let self = this;
      if (!this.lianjie) {
        this.$message({
          message: "请输入链接地址",
          type: "warning"
        });
        return;
      }
      let url = "/config/editExchangeCourse";
      let params = {
        pic: this.lianjie,
        url: this.picUrl
      };
      this.httpPost(url, params, res => {
        if (res.code == 200) {
          self.dialogVisible = false;
          self.$message({
            message: "操作成功",
            type: "success"
          });
          self.fenXiang();
        }
      });
    },

    //pic
    handleRemove2(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview2(file) {
      console.log(file);
    },
    onSuccessPic(Response, file, fileList) {
      this.picUrl = file.response.data.path;
    },

    //列表
    liebiao() {
      let self = this;
      let url = "/exchangeCourse/getList";
      let params = {
        pageNum: this.val,
        pageSize: "10"
      };
      this.httpPost(url, params, res => {
        if (res.code == 200) {
          self.total = res.data.total;
          self.pageList = res.data.list;
          res.data.list.forEach((element, i) => {
            self.pageList[i].index = i + 1;
          });
        }
      });
    },

    //编辑
    bj(v) {
      console.log(v);
      this.$router.push("/exchangeCheck?id=" + v);
    },
    //删除
    DeleteClick(v) {
      let self = this;
      console.log(v);
      this.$confirm(" 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let url = "/exchangeCourse/editOne";
          let params = {
            id: v,
            status: "1"
          };
          self.httpPut(url, params, res => {
            if (res.code == 200) {
              self.$message({
                message: "操作成功",
                type: "success"
              });
              self.liebiao();
            }
          });
        })
        .catch(() => {});
    },
    //新增
    add() {
      this.$router.push("/exchangeAdd");
    },
    //查看
    chakan(v) {
      console.log(v);
      this.$router.push("/exchangeCheck?id=" + v + "&kan=5");
    }
  }
};
</script>

<style lang="scss" scoped>
.tab {
  padding-left: 20px;
  border-radius: 5px;
  overflow: hidden;
}
.tab img {
  height: 100px;
  display: block;
}
.bjian {
  text-align: center;
  background: #409eff;
  line-height: 30px;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  width: 200px;
  margin-bottom: 10px;
}
.bili span {
  margin: 10px 0px;
  display: block;
}
.bili div {
  position: relative;
  font-size: 15px;
}
.bili input {
  height: 30px;
  width: 90%;
  margin-bottom: 10px;
}
.yongjin {
  line-height: 40px;
  font-size: 15px;
}
.xzengs {
  // margin-bottom: 10px;
  // padding-left: 20px;
  padding: 20px;
}
</style>
